<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" th:href="@{semantic/semantic.min.css}">
    <link rel="stylesheet" th:href="@{layui/css/layui.css}">

    <style>

    </style>
</head>

<body style="background-color: #FAFAFA">

<div id="login" class="layui-container" style="width: auto">

    <div class="layui-row">

        <div class="layui-col-md10 layui-col-md-offset1">
            <!--            导航栏-->
            <div th:insert="component/header.html::header('用户')"></div>

            <div class="ui horizontal divider" style="font-size: 26px; margin-top: 100px">登录</div>

            <!--            登录表单-->
            <div class="ui form"
                 style="width: 500px;height: 500px;margin-left: 570px;margin-top: 50px">

                <!--                用户名-->
                <div class="field">
                    <label>用户名：</label>
                    <input v-model="username" type="text">
                </div>

                <!--                密码-->
                <div class="field" style="margin-top: 30px">
                    <label>密码：</label>
                    <input v-model="password" type="password">
                </div>

                <button class="ui button" type="submit" style="margin-top: 30px" v-on:click="login">登录</button>

                <a class="ui" th:href="@{/register}"
                   style="cursor:pointer; margin-left: 300px;color: #01AAED;font-size: 16px">
                    <i class="ui icon play"></i>注册
                </a>
            </div>


        </div>

    </div>

</div>

<div th:insert="index.html::pageTail"></div>

</body>

<script th:src="@{js/jquery.min.js}" crossorigin="anonymous"></script>
<script th:src="@{semantic/semantic.min.js}"></script>
<script th:src="@{layui/layui.js}"></script>
<script th:src="@{js/vue.js}"></script>
<script th:src="@{js/axios.js}"></script>

<script>
    // vue
    new Vue({
        el: '#login',
        data: {
            username: "",
            password: ""
        },
        methods: {
            login: function () {
                // 验证用户名和密码的输入是否为空格和null
                if (this.checkNullAndSpace(this.password) || this.checkNullAndSpace(this.username)) {
                    layer.open({
                        title: '错误'
                        , content: '用户名或密码为空！'
                    });
                    return
                }

                var requestData = {
                    "username": this.username,
                    "password": this.password
                }
                axios.post('/login', requestData).then(response => {
                    var status = response.data.status;
                    console.log(response)
                    if (status == 9)
                        location.href = '/'
                    else if (status == 7)
                        layer.open({
                            title: '错误'
                            , content: '用户不存在！'
                        });
                    else if (status == 10)
                        layer.open({
                            title: '错误'
                            , content: '用户名或密码错误！'
                        });
                    else if (status == 500)
                        layer.open({
                            title: '错误'
                            , content: '系统出现错误，请稍后再试！'
                        });
                })
            },

            checkNullAndSpace: function (text) {
                if (text == null || text.replace(/^\s+,""/).replace(/^\s+$/, "") == '')
                    return true
                else return false
            }
        }
    })
</script>

</html>